<template>
  <div class="port-mapping-box">
    <div class="port-mapping-list">
      <Row class="port-mapping-tip">
        <Col span="6">
          容器端口
          <Tooltip content="需与镜像中的监听端口保持一致" placement="top">
            <Icon type="md-help-circle" />
          </Tooltip>
        </Col>
        <Col span="6">
          服务端口
          <Tooltip content="默认与容器端口一致" placement="top">
            <Icon type="md-help-circle" />
          </Tooltip>
        </Col>
        <Col span="3">协议</Col>
      </Row>
      <Row class="mapping-body" v-for="portBody in ports" :key="portBody.id">
        <Col span="6">
          <Input v-model.trim="portBody.targetPort" placeholder="80" @on-blur="integerValidate(portBody, 'targetPort')" @on-change="changServicePort(portBody)"></Input>
        </Col>
        <Col span="6">
          <Input v-model.trim="portBody.port" placeholder="80" @on-blur="integerValidate(portBody, 'port')"></Input>
        </Col>
        <Col span="3">
          <Select v-model="portBody.protocol">
            <Option :value="protocol" :key="protocol" v-for="protocol in PROTOCAL_LIST">{{protocol}}</Option>
          </Select>
        </Col>
        <Col span="3">
          <Icon type="ios-add-circle-outline" class="add-icon" @click="addPortMapping" />
          <Icon type="ios-remove-circle-outline" class="remove-icon" v-if="ports.length > 1" @click="minusPortMapping(portBody)" />
        </Col>
      </Row>
    </div>

    <div class="port-mapping-button">
      <span class="port-mapping-tip-cont"><span class="color-red">*</span><b>说明：</b>至少需要一个端口映射</span>
    </div>
  </div>
</template>
<script type="text/javascript">
import uuid from 'uuid/v4'
export default {
  name: 'PortMapping',
  data() {
    return {
      PROTOCAL_LIST: ['TCP', 'UDP']
    }
  },
  props: {
    ports: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    // 改变服务端口，将容器端口保持一致
    changServicePort(portBody) {
      portBody.port = portBody.targetPort
    },
    // 端口校验
    integerValidate(body, field) {
      if (isNaN(parseInt(body[field]))) {
        body[field] = ''
      } else {
        body[field] = body[field] > 65535 ? '65535' : body[field] > 0 ? body[field] : ''
      }
    },
    // 删除端口映射
    minusPortMapping(portBody) {
      this.$emit('update:ports', this.ports.filter((port) => {
        return port.id !== portBody.id
      }))
    },
    // 增加端口映射
    addPortMapping() {
      // 用于限制无限制添加
      if (this.ports.length > 10) {
        this.$Message.info({
          content: '端口映射数量不能超过10个',
          duration: this.DURATION
        })
        return
      }
      let temp = this.ports
      temp.push({
        id: uuid(),
        port: '',
        targetPort: '',
        protocol: 'TCP'
      })
      this.$emit('update:ports', temp)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.port-mapping-box {
  .ivu-col + .ivu-col {
    margin-left: 10px;
  }
}
.button-add {
  &:hover {
    color: #fff;
  }
}
.port-mapping-list {
  .mapping-title {
    margin-bottom: 6px;
  }
}
.add-icon-button {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  margin-right: 5px;
}
.add-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
  color: #3ea9f5;
  cursor: pointer;
}
.mapping-body {
  + .mapping-body {
    padding-top: 10px;
  }
}
.port-mapping-tip-cont {
  color: #999;
}
</style>
